<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏界面</title>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/swigbar.js"></script>
    <script src="js/timebar.js"></script>
    <script src="js/actor.js"></script>
    <style>
        html{
            width: 100%;
            height: 100%;
            min-height: 483px;
            min-width: 890px;
            padding: 0px;
        }
        body{
            margin: 0 auto;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .time{
            width: 410px;
            height: 50px;
            margin-top: 50px;
            margin-left: 400px;
            position: absolute;
            background-color: white;
            z-index: 1000;
        }
        #swig{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50px;
            bottom: -20px;
            z-index: 1000;
        }
        .outdiv{
            width:218px;
            height:50px;
            background-image:url(imgs/speed.png);
            position:absolute;
            z-index:1000;
            vertical-align: middle;
            left:70%;
            top:10%;
        }
        .speed{
            background-image:url(imgs/speedstyle.png);
            background-size:195px 30px;
            position: absolute;
            width: 0%;
            height: 30px;
            top: 10px;
            left: 10px;
        }
        @keyframes bikemove {
            from { left:0; }
            to { left:100%; }
        }
        @keyframes wheelRotate {
            from{transform: rotate(0deg)}
            to{transform: rotate(360deg)}
        }
    </style>
</head>
<body>
<div id="map" style="width: 100%;height:100%;position:absolute;z-index:10"></div>
<div id="control" style="z-index: 1000;width: 100%;height:100%;">
    <div id="sb" style="width:200px;height:200px;position:absolute;bottom:20px;left: 50px;"> </div>
</div>
</body>
<script>
    //速度计类
    function SpeedBar($parent){
        var $outdiv= $("<div class='outdiv'></div>");
        $outdiv.appendTo($parent);
        var $speed = $("<div class='speed'></div>");
        $speed.appendTo($outdiv);
        this.setMax=function(maxNum){
            this.max=maxNum;
        };
        this.setNow=function(now){
            console.log(now,this.max);
            $speed.css({width:((now/this.max)*90+"%")});
        };
    }
    //地图类
    function Map($viewframe){
        this.$me = $("<div></div>");
        this.$me.css({width: "10000px", height: "100%", "background-image": "url(imgs/World1Background.jpg)", "position":"absolute", "z-index": "10"});
        this.$me.appendTo($viewframe);
        $viewframe.css({overflow: "hidden"});
        //设置地图背景

        this.lookAt = function(x){
            this.$me.css("left", -x+"px");
        };
    }
    //导演类
    function Director($me){
        this.runSence=function(sence){
            this.sence.div.remove();
            this.sence = sence;
            sence.div.appendTo($me);
        };
    }
    //登陆场景
    function LoginSence(){
        $("button").click=function(){
            new Director($("body")).runSence(new GameScene());
        }
    }
    //注册场景
    //    function Register(){
    //
    //    }
    //游戏场景
    $(function(){
        //function GameSence(){
        var sx = 0, sy = 0;
        //新建地图
        var map = new Map($("#map"));
        //新建选手、moto自己
        var mb = new MotoBody("imgs/carBody1.png",6);
        var myRoles=new Actor("imgs/Biker1.png", mb,"imgs/wheel1.png");
        myRoles.addTo(map.$me);
        myRoles.wheelRoll(1);
        //新建选手mb1
        var mb1 = new MotoBody("imgs/carBody2.png", 4);
        var myRoles2=new Actor("imgs/Biker2.png", mb1,"imgs/wheel2.png");
        myRoles2.addTo(map.$me);
        myRoles2.wheelRoll(1);
        myRoles2.setPosition(0, 200);

        var mb2 = new MotoBody("imgs/carBody3.png", 5);
        var myRoles3=new Actor("imgs/Biker3.png", mb2,"imgs/wheel3.png");
        myRoles3.addTo(map.$me);
        myRoles3.wheelRoll(1);
        myRoles3.setPosition(0, 400);

        var time= new TimeBar($("#control"));
        var rock= new SwigBar($("#sb"));
        var sudu = new SpeedBar($("#control"));
        sudu.setMax(6);

        setInterval(function(){
            myRoles.move(sx*myRoles.getSpeed(), sy*myRoles.getSpeed());
            map.lookAt(myRoles.getX()-50);
            myRoles2.move(1*myRoles2.getSpeed(), 0);

            myRoles3.move(1*myRoles3.getSpeed(), 0);
            sudu.setNow(myRoles.getNowSpeed());
        }, 40);

        rock.bind("rock", function(evt, xx, yy){
            sx=xx;
            sy=yy;
            console.log(xx+","+yy);

        });
        //}
        //ready

//        var director= new Director($("body"));
//        director.runSence(new LoginScene());
    });
</script>
</html>
